D3.js 核心概念

#D3.js 核心概念| 来源: 网络整理| 查看: 265

这是搬运文章，请查看原文（原文会持续更新）datavis-note.benbinbin.com/article/d3/…

系列文章可以查看《数据可视化》专栏

参考

D3 开发者创建了一个在线开发环境 Observable，除了可以查看官方的教程和样例，它也是一个可视化作品分享社区，在里面可以找到很多优秀的可视化作品。

D3 官网 D3 官方教程 - Learn D3 D3 官方教程 - Let’s Make a Bar Chart D3.js 中文文档（非官方） d3-selection

本文介绍 D3.js 基于数据操作 DOM 的基本流程，涉及几个核心概念：

选择元素：选择需要操作的 DOM 节点（一般是 SVG 元素）绑定数据：将数据与 DOM 节点相关联，这样就实现了数据驱动 DOM 元素的属性样式更新增删元素：使用 join 操作（或使用 enter-update-exit 操作）增删 DOM 节点

💡 这是 D3 将数据映射为页面元素的最基本流程，主要使用 selection 选择模块，除此之外 D3 还提供其他模块用以实现更复杂的数据可视化效果。

选择器

为了基于数据「驱动」DOM，首先要选中所需操作的元素。JS 原生提供的操作 DOM 的方法代码十分冗长。D3 提供了一种声明式的方法 d3.select(query) 或 d3.selectAll(query) 来选择 DOM 节点或节点集合。

方法 d3.select(query) 选中符合条件的第一个 DOM 元素，而方法 selectAll(query) 则选择所有符合条件的 DOM 元素。如果没有元素被选中则返回空的选择集。

该方法接收的入参 query 是 CSS 所支持的选择器，如标签选择器、类选择器、ID 选择器、属性值选择器等。

该方法返回的选择集对象（或数组）具有丰富的方法，如设置样式属性，更改 HTML 或文本内容，注册事件监听器，添加、移除、排序节点等，这样就可以通过链式调用的方式操作 DOM。

// 操作单个节点 d3.select('body') .style('background-color', 'black'); // 修改元素的背景色 // 也可以操作节点集合 d3.selectAll('p') .style('color', 'white'); // 修改

元素的字体颜色

第二个操作等价的原生操作

const paragraphs = document.getElementByTagName('p'); for (let i=0; i d) .join( // 第一个传递的函数入参是 entering 选择集 enter => { // entering selection handler // 最后需要返回 entering 选择集实例化的节点，以便 join 方法最后将它以 updating 选择集进行合并 return enter.append('circle') }, // 第二个传递的函数入参是 updating 选择集 update => { // updating selection handler update.attr("fill", "blue") } exit => { // exiting selection handler exit.remove() // 将 exiting 选择集对应的节点从页面删除 } ) // 最后 join() 返回 entering 和 updating 的选择集 // 继续进行其他链式调用......

【本文地址】

公司简介

联系我们